<template>
  <div id="userManagement">
    <el-row>
      <el-col :span="12">
        <div class="title">设备列表</div>
      </el-col>
      <el-col :span="12">
        <div style="text-align:right">
          <el-button @click="add">添加</el-button>
        </div>
      </el-col>
    </el-row>
    <div style="margin-top: 30px">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F6F7F8' }"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="sn" label="设备编号" width="200">
        </el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="charge" label="区域"></el-table-column>
        <el-table-column prop="address" width="160" label="设备所在地址"></el-table-column>
        <el-table-column prop="remark" width="160" label="备注"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-popconfirm
              title="确定删除此设备吗?"
              @confirm="deleteRow(scope.row)"
            >
              <el-button slot="reference" type="text" size="small" style="color:red">删除</el-button>
            </el-popconfirm>
            <el-button slot="reference" type="text" size="small" style="margin-left:10px" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:right;margin-top:15px">
      <el-pagination
        background
        layout="prev, pager, next"
        :currentPage='current'
        @current-change="current_change"
        :total="total">
      </el-pagination>
    </div>
      <el-dialog :title="markTitle" :visible.sync="addUser" :close-on-click-modal="false" :before-close="closeDilog">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" class="demo-ruleForm">
          <el-row :gutter="25">
            <el-col :span="12">
              <el-form-item label="设备编号" prop="sn">
                <el-input v-model="ruleForm.sn" placeholder="请输入设备编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入设备名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区域" prop="charge">
                <el-input v-model="ruleForm.charge" placeholder="请输入区域"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备所在地址" prop="address">
                <el-input v-model="ruleForm.address" placeholder="请输入设备所在地"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="ruleForm.remark" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { deviceinfosPage, deviceinfos, deviceinfosde } from '../../api/index'
export default {
  data() {
    return {
      addUser: false,
      ruleForm: {
        sn: '',
        name: '',
        chargePhone: '',
        charge: '',
        phoneCard: '',
        address: '',
        remark: '',
      },
      rules: {
        sn: [
          { required: true, message: '请输入设备编号', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          
        ],
        chargePhone: [
          { required: true, message: '请输入负责人电话', trigger: 'blur' },
        ],
        charge: [
          { required: true, message: '请输入负责人', trigger: 'blur' },
        ],
        phoneCard: [
          { required: true, message: '请输入物联网卡信息', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入设备所在地址', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ],
      },
      tableData: [],
      current:1,
      total: 0,
      markTitle:'添加设备'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      deviceinfosPage({
        size:10,
        current: this.current,
      }).then(res => {
        this.total = res.data.total
        this.tableData = res.data.records
      })
    },
    //添加用户弹框
    add() {
      
      this.markTitle = "添加设备"
      this.addUser = true
    },
    current_change(currentPage) {
      this.current = currentPage;
      this.getData()
    },
    closeDilog() {
      this.addUser = false
      this.ruleForm = {
        sn: '',
        name: '',
        chargePhone: '',
        charge: '',
        phoneCard: '',
        address: '',
        remark: '',
      }
      
    },
    edit(data) {
      this.ruleForm = {...data};
      this.markTitle = "修改设备"
      this.addUser = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          deviceinfos(this.ruleForm).then(res => {
            if(res.code == 0) {
              this.$message.success(res.msg)
              this.closeDilog()
              this.getData()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    deleteRow(data) {
      deviceinfosde(data.id).then(res => {
        console.log(res)
        if(res.code == 0) {
          this.$message.success(res.msg)
          this.getData()
        }
      })
    }
  }
}
</script>

<style scoped>
#userManagement {
  padding: 40px;
}
.title {
  color: #202224;
  border-left: 3px solid #4a76ff;
  padding-left: 9px;
  margin-bottom: 30px;
}

</style>